<!DOCTYPE html>
<html >
<head>

 
<style>
html, body{
	padding: 9PX;
	margin: 5px;
	font-family: 'Raleway', sans-serif;
	color: #FFF;
	height: auto;
	font-weight: 60px;
}
body{
	background: rgba(100, 0, 0, 0.5);
	background-color: rgba(255,255,255,0.5);
}

.container{
   max-width:10%;
   background:#637CED;
   margin:20px;
   padding:50px 10px 50px 10px;
   border:0px solid #111;
   border-radius:4px;
   box-shadow:4px 4px 5px rgba(0, 0, 0, 0.75);
}
.link{
	font-size: 16px;
	font-weight: 300;
	text-align: center;
	position: relative;
	height: 70px;
	line-height: 60px;
	margin-top: 30px;
	overflow: hidden;
	width: 95%;
	margin-left:2%;
	cursor: pointer;
}
.link:after{
   content: '';
   position:absolute;
   width:90%;
   border-bottom:1px solid rgba(255, 255, 255, 0.5);
   bottom:50%;
   left:-100%;
   transition-delay: all 0.5s;
   transition: all 0.5s;
}
.link:hover:after,
.link.hover:after{
   left:100%;
}
.link .text{
   text-shadow:0px -40px 0px rgba(255, 255, 255, 1);
   transition:all 0.75s;
   transform:translateY(100%) translateZ(0);
   transition-delay:all 0.25s;
}
.link:hover .text,
.link.hover .text{
   text-shadow:0px -40px 0px rgba(255, 255, 255, 0);
   transform:translateY(0%) translateZ(0) scale(1.1);
   font-weight:600;
}
.d1 {background: #A3D0C3;}
.d1 input {
  width: 15%;
  height: 35px;
  padding-left: 0%;
  border: 2px solid #7BA7AB;
  border-radius: 20px;
  outline: none;
  background: #F9F0DA;
  color: #9E9C9C;
}
.d1 button {
  position: absolute; 
  top: 100
  right: 40%;
  width: 42px;
  height: 42px;
  border: none;
  background: #7BA7AB;
  border-radius: 1 7px 7px 0;
  cursor: pointer;
}
.d1 button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #F9F0DA;
}
body,td,th {
	font-family: Raleway, sans-serif;
}
</style>


  
</head>

<body>

 <div id="menu" style="width:100%; height:50px; clear:both; background-color:#9EACCD; font-style:oblique; text-align-last:center;" <h1><strong>健蓓养生服务</strong> </h1></div>
<div id="m" style="background-color:#FFF; text-align-last:center">

</div>
<div id="q" style="text-align-last:center;">

  


<div class="search d1">
	  <form>
	  <input type="text" placeholder="搜索从这里开始...">
	  <button type="submit"></button>
	  </form>
  </div>

    

<div style="text-align:center;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div id="dd" style="background-color:#9EACCD; height:1000px; width:100%;"
</div>

<div class="container">
  <div class="link">
    <div class="text">个人信息</div>
  </div>
  <div class="link">
    <div class="text">个人体检记录</div>
  </div>
  <div class="link">
    <div class="text">疾病评估</div>
  </div>
  <div class="link">
    <div class="text">养生建议</div>
  </div>
  <div class="link">
    <div class="text">健康监测</div>
  </div>
  <div class="link">
    <div class="text">问卷调查</div>
  </div>
</div>

<div id="dd" style="background-color:#699; height:1000px; width:100%;"

</div>




<script>
//For Demo only
var links = document.getElementsByClassName('link')
for(var i = 0; i <= links.length; i++)
   addClass(i)


function addClass(id){
   setTimeout(function(){
      if(id > 0) links[id-1].classList.remove('hover')
      links[id].classList.add('hover')
   }, id*750) 
}
</script>

<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

<div id="footer" style=" background-color:#999;height:50px;width:100%;text-align:center;">
<table width="100%" height="50px" border="1" cellspacing="1" cellpadding="1">
  <tr>
    <th scope="col"><a href="#">关于我们</th>
    <th scope="col"><a href="#">邮箱地址</th>
    <th scope="col"><a href="#">联系电话</th>
    <th scope="col"><a href="#">邮编</th>
  </tr>
</table>
</div>
</body>
</html>
